<template>
  <div id='Categories'>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" style="margin-bottom: 15px" @click="addClassTable">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <Tree :data="categoriesList" :columns="columns" :selection-type="false" :expand-type="false" show-index
            index-text="#" border style="text-align:center">
        <!-- 是否有效 -->
        <template slot="isOk" slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:aquamarine"></i>
          <i class="el-icon-error" v-else style="color:red"></i>
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
          <el-tag type="warning" v-else>三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="todo" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="editClassName(scope.row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="openDelete(scope.row)">删除</el-button>
        </template>
      </Tree>
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[1, 5, 10, 20]"
                     :page-size="getRoles.pagesize" :current-page="getRoles.pagenum"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
    <!-- 添加分类的弹框区域 -->
    <el-dialog title="添加分类" :visible.sync="addClassDialogVisible" width="30%" @close="clearList">
      <el-form ref="form" :model="addClassForm" label-width="90px" :rules="addRules" size="mini">
        <el-form-item label="分类名称:" prop="cat_name">
          <el-input v-model="addClassForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类:">
          <div class="block">
            <el-cascader :options="parentCateList" v-model="selectKey" clearable
                         :props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name', children: 'children', checkStrictly: 'true' }"
                         @change="parentHandleChange" size="mini">
            </el-cascader>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addClassDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="gotherInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改分类的弹窗区域 -->
    <el-dialog title="修改分类名称" :visible.sync="editClassDialogVisible" width="30%">
      <el-form label-width="90px" :model="editClassForm" size="mini">
        <el-form-item label="分类名称:">
          <el-input v-model="editClassForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="editClassDialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="sureEditClass" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Categories',
  mounted() {
    this.getCategoriesList()
  },
  data() {
    return {
      editClassForm: {},
      selectKey: [],
      parentCateList: [],
      addClassForm: {
        cat_name: '',
        cat_level: 0,
        cat_pid: 0
      },
      addClassDialogVisible: false,
      categoriesList: [],
      getRoles: {
        type: '',
        pagenum: 1,
        pagesize: 10
      },
      total: null,
      editClassDialogVisible: false,
      columns: [{
        label: '分类名称',
        prop: 'cat_name',
        align: 'center',
        width: '200px'
      }, {
        label: '是否有效',
        align: 'center',
        type: 'template',
        template: 'isOk'
      }, {
        label: '排序等级',
        type: 'template',
        template: 'order'
      }, {
        label: '操作',
        type: 'template',
        template: 'todo'
      }],
      addRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 1, message: '长度在 1 个字符以上', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    openDelete(val) {
      this.$confirm('此操作将永久删除该分类名称, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteClassName(val)
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    async deleteClassName(val) {
      const { meta } = await this.$http.delete(`categories/${val.cat_id}`)
      if (meta.status !== 200) return this.$message.error('分类删除失败')
      this.$message.success('分类删除成功')
      await this.getCategoriesList()
    },
    async sureEditClass() {
      console.log(this.editClassForm.cat_name)
      const {
        data,
        meta
      } = await this.$http.put(`categories/${this.editClassForm.cat_id}`, { cat_name: this.editClassForm.cat_name })
      if (meta.status !== 200) return this.$message.error('分类名称更改失败')
      await this.getCategoriesList()
      console.log(data)
      this.$message.success('分类名称更改成功')
      this.editClassDialogVisible = false
    },
    editClassName(val) {
      this.editClassForm = val
      this.editClassDialogVisible = true
    },
    clearList() {
      console.log('清空')
      this.$refs.form.resetFields()
      this.selectKey = []
      this.addClassForm.cat_pid = 0
      this.addClassForm.cat_level = 0
    },
    handleSizeChange(val) {
      this.getRoles.pagenum = 1
      this.getRoles.pagesize = val
      this.getCategoriesList()
    },
    handleCurrentChange(val) {
      this.getRoles.pagenum = val
      this.getCategoriesList()
    },
    async getCategoriesList() {
      const { data, meta } = await this.$http.get('categories', { params: this.getRoles })
      if (meta.status !== 200) return this.$message.error('分类列表数据获取失败,请稍后再试')
      console.log(data)
      this.categoriesList = data.result
      this.total = data.total
    },
    // 获取添加分类的父级分类
    async getParentClass() {
      const { data: res, meta } = await this.$http.get('categories', { params: { type: 2 } })
      if (meta.status !== 200) return this.$message.error('数据列表获取失败')
      this.parentCateList = res
      console.log(this.parentCateList)
    },
    addClassTable() {
      this.addClassDialogVisible = true
      this.getParentClass()
    },
    parentHandleChange(value) {
      console.log(value)
      if (value.length > 0) {
        this.addClassForm.cat_pid = this.selectKey[this.selectKey.length - 1]
        this.addClassForm.cat_level = this.selectKey.length
      } else {
        this.addClassForm.cat_pid = 0
        this.addClassForm.cat_level = 0
      }
    },
    async gotherInfo() {
      console.log(this.addClassForm)
      const { meta } = await this.$http.post('categories', this.addClassForm)
      if (meta.status !== 201) return this.$message.error(meta.msg)
      this.getCategoriesList()
      this.$message.success('添加分类数据成功')
      this.addClassDialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .zk-table__cell-inner {
  text-align: center;
}
</style>
